<template>
	<view class="container orderdetail">
		<myhead :title="mytitle"></myhead>
		<scroll-view class="mydetailinfo" scroll-y="true">
			<view class="detailinfo">
				<view class="each top">
					<view class="mytop">
						<view class="mystate">
							<text>票号：{{orederdetail.order}}</text>
							<text
							class="state"
							:style="{backgroundColor:(orederdetail.state == '0' ? '#11982B' : orederdetail.state == '1' ? 'red' : 'gray')}"
							v-text="orederdetail.state == '0' ? '已结清' : orederdetail.state == '1' ? '已赊欠' : '已作废'">
							</text>
						</view>
						<view class="myname">
							{{orederdetail.name}}
						</view>
						<view class="mytime">
							<view class="each saletime">
								销售时间：{{orederdetail.saletime}}
							</view>
							<view class="each ordertime">
								开单时间：{{orederdetail.ordertime}}
							</view>
						</view>
						<view class="mymoney">
							<view class="each order">
								<view class="num">
									<text class="icon">￥</text>
									<text class="text">{{orederdetail.money}}</text>
								</view>
								<view class="info">
									销售单金额
								</view>
							</view>
							<view class="each sheqian">
								<view class="num">
									<text class="icon">￥</text>
									<text class="text">{{orederdetail.money}}</text>
								</view>
								<view class="info">
									赊欠金额
								</view>
							</view>
							<view class="each shishou">
								<view class="num">
									<text class="icon">￥</text>
									<text class="text">{{orederdetail.money}}</text>
								</view>
								<view class="info">
									实收金额
								</view>
							</view>
						</view>
					</view>
			
				</view>
				<view class="each middle">
					<view class="title">
						商品明细
					</view>
					<view class="mytable">
						<uni-table border stripe emptyText="暂无更多数据" >
						    <!-- 表头行 -->
						    <uni-tr>
						        <uni-th align="center">商品名</uni-th>
						        <uni-th align="center">重量</uni-th>
						        <uni-th align="center">单价</uni-th>
								 <uni-th align="center" style="color: red;">合计</uni-th>
						    </uni-tr>
						    <!-- 表格数据行 -->
						    <uni-tr v-for="(item,index) in orederdetail.products" :key = "index">
						        <uni-td>{{item.name}}</uni-td>
						        <uni-td>{{item.weight}}斤</uni-td>
						        <uni-td>￥{{item.sales}}</uni-td>
								<uni-td style="color: red;">￥{{parseInt(item.sales)*parseInt(item.weight)}}</uni-td>
						    </uni-tr>
						</uni-table>
					</view>
				</view>
				<view class="each bottom">
					<view class="title">
						操作日志
					</view>
					<view class="dailynote">
						<view class="dailyitem" v-for="(item,index) in daily" :key = "index">
							<view class="left">
								<view class="num">
									{{index}}
								</view>
							</view>
							<view class="right">
								<view class="dailytitle">
									<view class="text">
										{{item.title}}
									</view>
									<view class="time">
										{{item.time}}
									</view>
								</view>
								<view class="info">
									<view class="infoitem">
										<text class="type">操作人员</text>
										<text class="maohao">：</text>
										<text class="inner">{{item.user}}</text>
									</view>
									<view class="infoitem">
										<text class="type">还款金额</text>
										<text class="maohao">：</text>
										<text class="inner">2334</text>
									</view>
									<view class="infoitem">
										<text class="type">应收</text>
										<text class="maohao">：</text>
										<text class="inner">{{item.money}}</text>
									</view>
									<view class="infoitem">
										<text class="type">实收</text>
										<text class="maohao">：</text>
										<text class="inner">{{item.money}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottomoperator">
			<view class="operator">
				<view class="operatoreach delete">
					作废
				</view>
				<view class="operatoreach reset">
					撤销还款
				</view>
				<view class="operatoreach change">
					改单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myhead from "../../components/header/header.vue"
	export default {
		data() {
			return {
				mytitle:'销售订单详情',
				orederdetail:{
					order:'0006',//票号
					name:'临时客户',//客户名字
					saletime:'2021-10-10',//销售日期
					ordertime:'2021-10-10 11:29:30',//开单时间
					money:'0',//金额
					state:'0',//0已结清，1赊欠，2作废
					products:[
						{
							name:'八爪鱼',
							weight:'8',//购买的重量（斤）
							sales:'35',//单价的数量
						},
						{
							name:'小鸡仔',
							weight:'18',//购买的重量（斤）
							sales:'305',//单价的数量
						}
					],
				},
				daily:[
					{
						title:'赊欠',
						time:'2021-10-05 15:14:32',
						user:'塘主',
						money:'453.0',
						getmoney:'453.0'
					},
					{
						title:'赊欠',
						time:'2021-10-05 15:14:32',
						user:'塘主',
						money:'453.0',
						getmoney:'453.0'
					}
				]
			};
		},
		components:{
			myhead,
		}
	}
</script>

<style lang="scss">
.orderdetail{
	display: flex;
	flex-direction: column;
	color: black;
	.mydetailinfo{
		flex: 1;
		overflow: hidden;
	}
	.detailinfo{
		background-color: #EEEEEE;
		padding: 10rpx 10rpx;
		>.each{
			background-color: #FFFFFF;
			border-radius: 16rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
			padding: 10rpx;
			&.top{
				.mytop{
					.mystate{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 30rpx;
						color: #E11C7C;
						.state{
							color: #FFFFFF;
							padding: 8rpx 20rpx;
							font-size: 24rpx;
							border-radius: 20rpx;
						}
					}
					.myname{
						padding: 10rpx 0rpx;
						font-size: 36rpx;
						font-weight: bold;
					}
					.mytime{
						font-size: 24rpx;
						color: grey;
						padding: 4rpx 0;
						position: relative;
						border-bottom: 2rpx solid #dcdfe6;
						>.each{
							line-height: 40rpx;
						}
					}
					.mymoney{
						display: flex;
						justify-content: space-around;
						padding: 20rpx 0rpx;
						>.each{
							display: flex;
							flex-direction: column;
							align-items: center;
							.num{
								vertical-align: bottom;
								.icon{
									font-size: 24rpx;
									color: #12054E;
								}
								.text{
									color: #12054E;
									font-weight: bold;
									text-align: center;
									font-size: 52rpx;
								}
							}
							.info{
								font-size: 28rpx;
							}
							&.sheqian{
								.icon{
									color: #EB7A17;
								}
								.text{
									color: #EB7A17;
								}
							}
							&.shishou{
								.icon{
									color: #F32C38;
								}
								.text{
									color: #F32C38;
								}
							}
						}
					}
				}
			}
			&.middle{
				.title{
					padding: 16rpx 30rpx;
					font-size: 30rpx;
				}
				.mytable{
					padding: 20rpx 0;
				}
			}
			&.bottom{
				.title{
					padding: 16rpx 30rpx;
					font-size: 30rpx;
				}
				.dailynote{
					padding: 2rpx 30rpx;
					.dailyitem{
						display: flex;
						margin-bottom: 20rpx;
						.left{
							width: 80rpx;
							.num{
								width: 50rpx;
								height: 50rpx;
								background-color: #30366E;
								text-align: center;
								color: #FFFFFF;
								line-height: 50rpx;
								border-radius: 50%;
								font-size: 32rpx;
								margin: 0 auto;
							}
						}
						.right{
							flex: 1;
							padding: 0 30rpx;
							.dailytitle{
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding-bottom: 30rpx ;
								.text{
									color: #30366E;
									font-size: 32rpx;
								}
								.time{
									font-size: 24rpx;
									color: gray;
								}
							}
							.info{
								.infoitem{
									.type{
										display: inline-block;
										color: gray;
										font-size: 24rpx;
										width: 120rpx;
										text-align:justify;
										text-justify:distribute-all-lines;/*ie6-8*/
										text-align-last:justify;/* ie9*/
										-moz-text-align-last:justify;/*ff*/
										-webkit-text-align-last:justify;/*chrome 20+*/
									}
									.maohao{
										color: gray;
										font-size: 24rpx;
									}
									.inner{
										font-size: 24rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	.bottomoperator{
		padding: 20rpx 0;
		.operator{
			margin: 0 auto;
			width: 90%;
			display: flex;
			border-radius: 500rpx;
			overflow: hidden;
			.operatoreach{
				flex: 1;
				padding: 20rpx 30rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 32rpx;
				&.delete{
					background-color: #C30943;
				}
				&.reset{
					background-color: #E87C0E;
				}
				&.change{
					background-color: #51599B;
				}
			}
		}
	}
}
</style>
